<template>
  <h1>表格组件</h1>
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <BaseForm
      :model="formData"
      :schema="formSchema"
      :rules="formRules"
      :columns="2"
      :gutter="16"
      @submit="handleSubmit"
      @reset="handleReset"
    />
  </el-dialog>
  <!-- 表格组件 -->
  <BaseTable
    :table-data="tableData"
    :columns="columns"
    :pagination="pagination"
    :total="pagination.total"
    :editable="true"
    :show-selection="false"
    :show-index="true"
    :show-action="true"
    :showAction="true"
    @sort-change="handleSort"
    @page-change="fetchData"
    @edit="handleEdit"
    @delete="handleDelete"
  >
    <!-- 自定义操作列 -->
    <template #action="{ row }">
      <el-button type="text" @click="viewDetail(row)">查看</el-button>
      <el-button type="text" @click="handleEdit(row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(row)">删除</el-button>
    </template>

    <!-- 自定义列内容（如状态列） -->
    <template #status="{ row }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'">
        {{ row.status === 1 ? "启用" : "禁用" }}
      </el-tag>
    </template>
  </BaseTable>
</template>

<script setup>
import BaseTable from "@/components/BaseTable/BaseTable.vue";
import { onMounted, reactive, ref } from "vue";
// 表格数据
const tableData = ref([]);
// 列配置
const columns = ref([
  {
    prop: "name",
    label: "姓名",
    width: "120",
    editable: true, // 支持行内编辑
    editType: "input", // 编辑类型为输入框
  },
  {
    prop: "age",
    label: "年龄",
    width: "80",
    sortable: true,
    editable: true,
    editType: "input",
  },
  {
    prop: "gender",
    label: "性别",
    sortable: true,
    editable: true,
    editType: "input",
  },
  {
    prop: "status",
    label: "状态",
    width: "100",
    slot: "status", // 自定义列内容
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: "180",
    sortable: true,
    editable: true,
    editType: "date",
  },
  {
    prop: "department",
    label: "部门",
    width: "180",
    sortable: true,
    editable: true,
    editType: "input",
  },
  {
    prop: "joinDate",
    label: "入职时间",
    width: "180",
    sortable: true,
    editable: true,
    editType: "date",
  },
  {
    prop: "salary",
    label: "薪资",
    editable: true,
    editType: "input",
  },
  {
    prop: "post",
    label: "岗位",
    width: "180",
    editable: true,
    editType: "input",
  },
  {
    prop: "post",
    label: "岗位",
    width: "180",
    editable: true,
    editType: "input",
  },
]);

const handleTableData = () => {
  const date = new Date();
  const departments = [
    "生产部",
    "客服部",
    "技术部",
    "市场部",
    "财务部",
    "人力资源部",
    "销售部",
  ];
  const postments = [
    "UI设计",
    "测试",
    "前端开发",
    "后端开发",
    "运维",
    "产品经理",
    "销售",
    "人力资源",
    "财务",
  ];
  for (let i = 0; i < 100; i++) {
    const item = {
      id: i + 1,
      name: `用户${i + 1}`,
      age: `${20 + i}`,
      gender: "男",
      status: 1,
      createTime: date.toISOString().split("T")[0],
      department: departments[Math.floor(Math.random() * departments.length)],
      joinDate: date.toISOString().split("T")[0], // 格式化为YYYY-MM-DD
      salary: Math.floor(Math.random() * 20000) + 5000, // 5000-25000
      post: postments[Math.floor(Math.random() * departments.length)],
    };
    tableData.value.push(item);
    pagination.total = tableData.value.length;
    console.log(pagination, "pagination");
  }
};
// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50],
  total: tableData.value.length,
});
// 模拟远程获取数据
const fetchData = () => {
  console.log("分页参数变化，重新获取数据：", pagination);
  // 这里调用接口获取数据，示例中直接使用本地数据
};

// 处理表头排序
const handleSort = ({ prop, order }) => {
  console.log("排序字段：", prop, "排序顺序：", order);
  // 本地排序示例（实际可调用接口）
  if (order === "ascending") {
    tableData.value.sort((a, b) => (a[prop] > b[prop] ? 1 : -1));
  } else if (order === "descending") {
    tableData.value.sort((a, b) => (a[prop] < b[prop] ? 1 : -1));
  }
};

// 处理编辑事件
const handleEdit = ({ row, status }) => {
  if (status === "exit") {
    console.log("编辑完成，当前行：", row);
  }
};

// 处理删除事件
const handleDelete = (row) => {
  console.log("删除行：", row);
  // 从表格数据中移除该行
  tableData.value = tableData.value.filter((item) => item.id !== row.id);
  pagination.total = tableData.value.length;
};

// 查看详情
const viewDetail = (row) => {
  console.log("查看详情：", row);
};
onMounted(() => {
  handleTableData();
});
</script>

<style scoped lang="less">
</style>
